<template>
  <div id="driverCity">
    <div class="driverIndex_top">
      <p>
        <img src="@/assets/imgs/sjzm_bg.png" />
      </p>
      <div class="cityname">
        <p @click="selectCity">
          {{ selectCityText
          }}
          <img src="@/assets/imgs/sjzm_next.png" />
        </p>
      </div>
      <div class="citytype" v-if="driverType == 1">
        <h6>城际有车车主加入</h6>
        <p>城际用车、补贴高、工作轻松</p>
        <p>固定收入+提成+绩效</p>
      </div>
      <div class="citytype" v-if="driverType == 2">
        <h6>出租车车主加入</h6>
        <p>在线接单，让您获得更多订单、提升收入</p>
        <p>固定收入+提成+绩效</p>
      </div>
      <div class="citytype" v-if="driverType == 3">
        <h6>市内车主-带车加入</h6>
        <p>拼车模式，订单多多，收入多多</p>
      </div>
      <div class="citytype" v-if="driverType == 4">
        <h6>市内车主-无车加入</h6>
        <p>拼车模式，订单多多，收入多多</p>
      </div>
    </div>
    <div v-if="driverType == 1">
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>基本要求
          </p>
        </div>
        <div class="citylisttext">
          <p>1、年龄:男22到50周岁，女22到45周岁;</p>
          <p>2、驾龄:驾齡3年以上，准驾车型c2及以上;</p>
          <p>3、无暴力犯罪、吸毒、精神病记录;无酒驾、毒驾等严重交通违法事故记录;</p>
          <p>4、普通话标准、身体健康、品貌端正，具有良好的服务意识;</p>
          <p>5、三年内被吊销出租汽车驾驶员从业资格证件的记录,或三年内有重大交通责任事故的，不予注册;</p>
        </div>
      </div>
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>车辆准入招募条件
          </p>
        </div>
        <div class="citylisttext">
          <p>1、有车加入车辆要求10万元以上，5-7座小型汽车，车况良好，车龄6年内;</p>
          <p>2、驾驶车辆必须为注册车辆，自有车辆或获得车主许可;</p>
        </div>
      </div>
      <div class="citylist" style="margin-bottom:140px">
        <div class="citylisthd">
          <p>
            <span></span>注意事项
          </p>
        </div>
        <div class="citylisttext">
          <p>1、有车加入车辆要求10万元以上，5-7座小型汽车，车况良好，车龄6年内;</p>
          <p>2、驾驶车辆必须为注册车辆，自有车辆或获得车主许可;</p>
        </div>
      </div>
    </div>
    <div v-if="driverType == 2">
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>基本要求
          </p>
        </div>
        <div class="citylisttext">
          <p>1、年龄:男22到50周岁，女22到45周岁;</p>
          <p>2、驾龄:驾齡3年以上，准驾车型c2及以上;</p>
          <p>3、无暴力犯罪、吸毒、精神病记录;无酒驾、毒驾等严重交通违法事故记录;</p>
          <p>4、普通话标准、身体健康、品貌端正，具有良好的服务意识;</p>
          <p>5、三年内被吊销出租汽车驾驶员从业资格证件的记录,或三年内有重大交通责任事故的，不予注册;</p>
        </div>
      </div>
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>车辆准入招募条件
          </p>
        </div>
        <div class="citylisttext">
          <p>1、有车加入车辆要求10万元以上，5-7座小型汽车，车况良好，车龄6年内;</p>
          <p>2、驾驶车辆必须为注册车辆，自有车辆或获得车主许可;</p>
        </div>
      </div>
      <div class="citylist" style="margin-bottom:140px">
        <div class="citylisthd">
          <p>
            <span></span>注意事项
          </p>
        </div>
        <div class="citylisttext">
          <p>1、有车加入车辆要求10万元以上，5-7座小型汽车，车况良好，车龄6年内;</p>
          <p>2、驾驶车辆必须为注册车辆，自有车辆或获得车主许可;</p>
        </div>
      </div>
    </div>
    <div v-if="driverType == 3">
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>基本要求
          </p>
        </div>
        <div class="citylisttext">
          <h6>司机:</h6>
          <p>1、本市户籍。</p>
          <p>2、年龄：22周岁至55周岁。</p>
          <p>3、驾龄：3年以上驾龄。</p>
          <p>4、准驾车型：C1及C1以上。</p>
          <p>5、无犯罪记录。</p>
          <p>6、无吸毒、精神病记录。</p>
          <p>7、可提供并通过驾驶员体检证明。</p>
          <h6>车辆:</h6>
          <p>1、5座及以下乘用车，非客货两用车辆。</p>
          <p>2、车辆裸车价格不得低于7万，车龄3年以下，车辆行驶里程不得高于8万公里。</p>
          <p>3、车辆牌照为所在公司省市牌照。</p>
          <p>4、车辆外观、内饰、性能良好。</p>
          <p>5、车辆保险具备交强险，商业险，及三者险，三者保障金额不得低于30万。</p>
        </div>
      </div>
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>招募流程
          </p>
        </div>
        <div class="citylisttext">
          <p>
            1、
            <span>提交资料：</span>司机注册材料提交后，等待平台工作人员信息审核
          </p>
          <p>
            2、
            <span>审核完成：</span>平台审核通过会有短信告知。
          </p>
          <p>
            3、
            <span>面试培训：</span>我们会通知面试及培训时间，面试通过后参加司机岗前培训
          </p>
          <p>
            4、
            <span>上线接单：</span>培训考核通过上线接单
          </p>
        </div>
      </div>
      <div class="citylist" style="margin-bottom:140px">
        <div class="citylisthd">
          <p>
            <span></span>注意事项
          </p>
        </div>
        <div class="citylisttext_box">
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>注册成为司机都需要准备那些资料？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>身份证、行驶本、驾驶本。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>面试成为司机都需要携带些什么？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>携带身份证原件及复印件、驾驶本原件及复印件、行驶本原件及复印件、保单复印件、无犯罪证明、体检报告。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>面试的内容主要包含那些内容？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>个人自我介绍、个人当地路况熟悉程度、车况检查、公司项目介绍。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何开具无犯罪记录？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>可去地方派出所或街道办事处开具相关证明。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何开具驾驶员体检证明？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>可去地方县级或三甲医院体检开具。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>对车辆外观、内饰、性能有什么要求？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>即外观无明显缺陷、伤痕，内饰无明显破损、污渍，车辆年检正常。</em>
            </p>
            <div style="clear:both"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="driverType == 4">
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>基本要求
          </p>
        </div>
        <div class="citylisttext">
          <h6>司机:</h6>
          <p>1、本市户籍。</p>
          <p>2、年龄：22周岁至55周岁。</p>
          <p>3、驾龄：3年以上驾龄。</p>
          <p>4、准驾车型：C1及C1以上。</p>
          <p>5、无犯罪记录。</p>
          <p>6、提供个人征信报告。</p>
          <p>7、无吸毒、精神病记录。</p>
          <p>8、可提供并通过驾驶员体检证明。</p>
        </div>
      </div>
      <div class="citylist">
        <div class="citylisthd">
          <p>
            <span></span>招募流程
          </p>
        </div>
        <div class="citylisttext">
          <p>
            1、
            <span>提交资料：</span>司机注册材料提交后，等待平台工作人员信息审核
          </p>
          <p>
            2、
            <span>审核完成：</span>平台审核通过会有短信告知。
          </p>
          <p>
            3、
            <span>面试培训：</span>我们会通知面试及培训时间，面试通过后参加司机岗前培训
          </p>
          <p>
            4、
            <span>确定模式：</span>多种合作模式共您选择
          </p>
          <p>
            5、
            <span>鉴订合同：</span>签订《汽车租赁合同》、《租赁车辆租用告知书》、《特别约定》、《车辆交接单》等相关合同
          </p>
          <p>
            6、
            <span>上线接单：</span>领取公司配备车辆后即可上线接单。
          </p>
        </div>
      </div>
      <div class="citylist" style="margin-bottom:140px">
        <div class="citylisthd">
          <p>
            <span></span>注意事项
          </p>
        </div>
        <div class="citylisttext_box">
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>注册成为司机都需要准备那些资料？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>身份证、驾驶本</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>面试成为司机都需要携带些什么？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>携带身份证原件及复印件、驾驶本原件及复印件、无犯罪证明、体检报告。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>面试的内容主要包含那些内容？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>个人自我介绍、当地路况熟悉程度、公司项目介绍。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何开具无犯罪记录？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>可去地方派出所或街道办事处开具相关证明。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何开具个人征信报告？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>
                1.个人征信报告要去当地的中国人民银行征信中心打印。
                2.只需要携带身份证即可。
              </em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何开具驾驶员体检证明？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>可去地方县级或三甲医院体检开具。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>如何参加岗前培训？</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>面试通过后司机需要参加统一培训及考核，完成考核后方成为正式司机</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>无车加入合作模式是什么?</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>面试时公司项目介绍会做详细讲解。</em>
            </p>
            <div style="clear:both"></div>
          </div>
          <div class="driverquestionList">
            <p class="driverquestion_hd">
              <span>Q</span>
              <em>需要签订哪些协议?</em>
            </p>
            <div style="clear:both"></div>
            <p class="driverquestion_text">
              <span>A</span>
              <em>为保障司机、公司双方利益，需要签订《汽车租赁合同》、《租赁车辆租用告知书》、《特别约定》、《车辆交接单》，以明确双方规则制度及相关责任。</em>
            </p>
            <div style="clear:both"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="driverIndex_btn" @click="driverTypeBtn">
      <p>立即加入</p>
    </div>
  </div>
</template>
<script>
import { Icon, Field, FieldItem, InputItem, Toast, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '平安到家车主注册',
      driverType: '', // 注册司机类型
      selectCityText: ''
    };
  },
  mounted() {
    if (this.$route.query.type === '1') {
      this.driverType = '1';
    } else if (this.$route.query.type === '2') {
      this.driverType = '2';
    } else if (this.$route.query.type === '3') {
      this.driverType = '3';
    } else if (this.$route.query.type === '4') {
      this.driverType = '4';
    }
    if (sessionStorage['cityName']) {
      this.selectCityText = sessionStorage['cityName'];
    } else {
      this.selectCityText = '选择服务城市';
    }
  },
  methods: {
    driverTypeBtn() {
      sessionStorage['backCity'] = '1'; // 选择城市后 控制跳转路径
      if (this.$route.query.type === '1') {
        // 城际
      } else if (this.$route.query.type === '2') {
        // 出租车
        this.$router.push({
          name: 'driverIdentity',
          query: {
            driverphone: this.$route.query.driverphone,
            serviceType: this.$route.query.serviceType
          }
        });
      } else if (this.$route.query.type === '3') {
        // 市内有车
        window.location.href =
          '/driverrecruitment/driverQuickIdentity?type=3&driverphone=' +
          this.$route.query.driverphone +
          '&cardType=1' +
          '&serviceType=' +
          this.$route.query.serviceType;
        // this.$router.push({
        //     name: 'driverQuickIdentity',
        //     query: {
        //         type: '3',
        //         driverphone: this.$route.query.driverphone,
        //         cardType: '1',
        //         serviceType: this.$route.query.serviceType
        //     }
        // });
      } else if (this.$route.query.type === '4') {
        // 市内无车
        window.location.href =
          '/driverrecruitment/driverQuickIdentity?type=4&driverphone=' +
          this.$route.query.driverphone +
          '&cardType=2' +
          '&serviceType=' +
          this.$route.query.serviceType;
        // this.$router.push({
        //     name: 'driverQuickIdentity',
        //     query: {
        //         type: '4',
        //         driverphone: this.$route.query.driverphone,
        //         cardType: '2',
        //         serviceType: this.$route.query.serviceType
        //     }
        // });
      }
    },
    // 选择城市
    selectCity() {
      sessionStorage['backCity'] = '2';
      this.$router.push({
        name: 'cityList',
        query: {
          type: this.$route.query.type,
          driverphone: this.$route.query.driverphone,
          serviceType: this.$route.query.serviceType
        }
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#driverCity {
  height: 100%;

  .driverIndex_top {
    position: relative;
  }

  .driverIndex_top > p > img {
    width: 100%;
    display: block;
  }

  .cityname {
    position: absolute;
    bottom: 230px;
    width: 100%;
  }

  .cityname p {
    width: 480px;
    height: 80px;
    background-color: #fff;
    margin: auto;
    border-radius: 7px;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    color: #333;
  }

  .cityname p img {
    width: 18px;
    margin-left: 10px;
  }

  .citytype {
    position: absolute;
    bottom: 30px;
    left: 30px;
  }

  .citytype h6 {
    font-size: 36px;
    color: #333;
  }

  .citytype p {
    font-size: 30px;
    color: #333;
    margin-top: 10px;
  }

  .citylist {
    margin-top: 20px;
    margin-bottom: 60px;
  }

  .citylisthd {
    border-bottom: solid 1px #E0E0E0;
  }

  .citylisthd p {
    padding-left: 40px;
    font-size: 30px;
    color: #333;
    padding-bottom: 20px;
  }

  .citylisthd p span {
    width: 6px;
    height: 36px;
    display: inline-block;
    background-color: #FF6917;
    position: relative;
    top: 8px;
    right: 10px;
  }

  .citylisttext {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .citylisttext h6 {
    margin-top: 15px;
    padding: 0px 30px;
    color: #FF6917;
    font-weight: 400;
    font-size: 28px;
  }

  .citylisttext p {
    font-size: 26px;
    color: #666;
    margin-top: 15px;
    padding: 0px 30px;
  }

  .citylisttext span {
    color: #FF6917;
  }

  .driverquestionList {
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 30px;
  }

  .driverquestion_hd {
    font-size: 28px;
    color: #333;
  }

  .driverquestion_hd em {
    float: left;
    width: 90%;
    font-style: normal;
  }

  .driverquestion_hd span {
    background-color: #3F88EB;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
    float: left;
  }

  .driverquestion_text {
    font-size: 26px;
    color: #999;
    margin-top: 18px;
  }

  .driverquestion_text em {
    float: left;
    width: 90%;
    font-style: normal;
  }

  .driverquestion_text span {
    background-color: #FF6917;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
    float: left;
  }

  .driverIndex_btn {
    position: fixed;
    bottom: 0px;
    width: 94%;
    margin-left: 3%;
    z-index: 100;
  }

  .driverIndex_btn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
  }
}
</style>
